<template>
  <div class="search-box">
    <div class="search-box-top">
      <div class="capital-user">
        <div class="comprehensive-lf">
          <!-- <div class="exportBtn"
               @click="exportBtn">导出数据</div> -->
          <div class="comprehensive-sel">
            <el-radio-group
              v-model="radio"
              @change="selDayData"
            >
              <el-radio-button label="全部" />
              <el-radio-button label="最近30天" />
              <el-radio-button label="最近90天" />
            </el-radio-group>
          </div>
        </div>
        <div class="sel-time">
          <el-date-picker
            v-model="value"
            type="daterange"
            range-separator="-"
            value-format="yyyy-MM-dd"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="selTime"
          />
        </div>
      </div>
    </div>
    <el-table
      class="search-table"
      :data="tableData"
      style="width: 96%"
    >
      <el-table-column
        type="index"
        label="排行"
        align="center"
        width="200"
      />
      <el-table-column
        prop="user_name"
        label="用户名"
        align="center"
      />
      <el-table-column
        prop="COUNT(o.user_code)"
        label="订单数（单位\个）"
        align="center"
      />
      <el-table-column
        prop="totalPrices"
        label="购买金币金额"
        align="center"
      />
    </el-table>
    <div class="pagination-block">
      <el-pagination
        prev-text="上一页"
        next-text="下一页"
        :background="true"
        :current-page.sync="currentPage"
        :page-size="pageSize"
        layout="prev, pager, next,total,slot, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
        <div
          class="page-number"
          layout="slot"
        >
          <div class="jump-button">跳至</div>
        </div>
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getUserRanking, getUserThirty, getUserNinety } from '@/api/capital'
import { recentDate, nineDate } from '@/utils/util.js'
export default {
  inject: ['reload'],
  data() {
    return {
      radio: '全部',
      value: '',
      tableData: [],
      currentPage: 1,
      total: 0,
      pageSize: 6
    }
  },
  created() {
    this.selAll(this.currentPage, this.pageSize, '', '')
  },
  methods: {
    exportBtn() {
      this.$confirm('确认是否需要导出数据？', '确认信息', {
        distinguishCancelAndClose: true,
        confirmButtonText: '继续导出',
        cancelButtonText: '放弃导出'
      })
        .then(() => {
          require.ensure([], () => {
            // 路径看自己项目位置
            const {
              export_json_to_excel
            } = require('../../../../excel/Export2Excel')
            const tHeader = ['用户名', '订单', '购买金币金额'] // 上面设置Excel的表格第一行的标题
            const filterVal = [
              'user_name',
              'COUNT(o.user_code)',
              'totalPrices'
            ] // 上面的tableData里对象的属性
            const list = this.tableData // 把data里的tableData存到list
            const data = this.formatJson(filterVal, list)
            export_json_to_excel(tHeader, data, '列表excel')
          })
          this.$message({
            type: 'success',
            message: '导出成功,正在下载'
          })
        })
        .catch(action => {
          this.$message({
            type: 'error',
            message: '放弃导出'
          })
        })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },
    seeBtn() { },
    // 全部数据
    selAll(pageNum, pageSize, startTime, endTime) {
      getUserRanking({
        pageNum: pageNum,
        pageSize: pageSize,
        startTime: startTime,
        endTime: endTime
      }).then(res => {
        // console.log(res);
        this.tableData = res.data.list
        this.total = res.data.total
      })
    },
    // 最近三十天数据
    selThirty() {
      this.selAll(
        this.currentPage,
        this.pageSize,
        recentDate(31),

        recentDate(1)
      )
    },
    // //最近九十天数据
    selNinety() {
      this.selAll(
        this.currentPage,
        this.pageSize,
        nineDate(),
        recentDate(1)
      )
    },
    selDayData() {
      if (this.radio === '全部') {
        this.selAll(this.currentPage, this.pageSize, '', '')
      } else if (this.radio === '最近30天') {
        this.selThirty()
      } else {
        this.selNinety()
      }
    },
    // 选择时间
    selTime() {
      // console.log(this.value);
      this.selAll(
        this.currentPage,
        this.pageSize,
        this.value[0],
        this.value[1]
      )
    },
    handleSizeChange() { },
    handleCurrentChange() {
      this.selAll(this.currentPage, this.pageSize, '', '')
    }
  }
}
</script>
